<template>
   <div class="table-body-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<div class="system-user-search mb15">
            <el-input class="search-input"
               v-model="state.tableData.param.ipaddr"
               placeholder="请输入登录地址"
               clearable
               @keyup.enter="handleQuery"
            />
            <el-input class="ml10 search-input"
               v-model="state.tableData.param.userName"
               placeholder="请输入用户名称"
               clearable
               style="width: 200px"
               @keyup.enter="handleQuery"
            />
            <el-button class="ml10" type="primary" @click="handleQuery"><el-icon>
						<ele-Search />
					</el-icon>搜索</el-button>
            <el-button @click="resetQuery"><el-icon>
						<ele-Refresh />
					</el-icon>重置</el-button>
         </div>
      <el-table
         v-loading="state.tableData.loading" :data="state.tableData.data"
      >
         <el-table-column label="序号" width="60" type="index" align="center">
            <template #default="scope">
               <span>{{ (state.tableData.param.current - 1) * state.tableData.param.size + scope.$index + 1 }}</span>
            </template>
         </el-table-column>
         <el-table-column label="会话编号" align="center" prop="token" :show-overflow-tooltip="true" />
         <el-table-column label="登录名称" align="center" prop="username" :show-overflow-tooltip="true" />
         <el-table-column label="所属部门" align="center" prop="deptName" :show-overflow-tooltip="true" />
         <el-table-column label="主机" align="center" prop="ip" :show-overflow-tooltip="true" />
         <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
         <el-table-column label="操作系统" align="center" prop="os" :show-overflow-tooltip="true" />
         <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
         <el-table-column label="登录时间" align="center" prop="lastLoginTime" width="180">
            <template #default="scope">
               <span>{{ parseTime(scope.row.lastLoginTime) }}</span>
            </template>
         </el-table-column>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
               <el-button link type="primary" icon="Delete" @click="handleForceLogout(scope.row)" v-auth="['monitor:online:forceLogout']">强退</el-button>
            </template>
         </el-table-column>
      </el-table>
      <pagination
        v-show="state.tableData.total>0"
        :total="state.tableData.total"
        v-model:page="state.tableData.param.current"
        v-model:limit="state.tableData.param.size"
        @pagination="getList"
            />
   </el-card>
   </div>
</template>

<script setup name="Online">
import { monitorApi } from '/@/api/monitor/index'
import constConfig from '/@/utils/constConfig';

const { proxy } = getCurrentInstance();

const state = reactive({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			ipaddr: undefined,
         userName: undefined,
			...constConfig.pageModel,
		},
	},
	formData: {
		username: '', // 账户名称
		nickName: '', // 用户昵称
		deptId: '', // 部门
		phone: '', // 手机号
		email: '', // 邮箱
		sex: '', // 性别
		status: '0', // 用户状态
		postIds: [],
        roleIds: []
	},
	...constConfig.dialogType
});

/** 查询登录日志列表 */
function getList() {
  state.tableData.loading = true;
  monitorApi().onlinePage(state.tableData.param).then(res => {
    state.tableData.data = res.data.records??[];
		state.tableData.total = res.data.total;
		state.tableData.loading = false;
  });
}
/** 搜索按钮操作 */
function handleQuery() {
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}
/** 强退按钮操作 */
function handleForceLogout(row) {
    proxy.modal.confirm('是否确认强退名称为"' + row.username + '"的用户?').then(function () {
  return monitorApi().forceLogout(row.token);
  }).then(() => {
    getList();
    proxy.modal.msgSuccess("删除成功");
  }).catch(() => {});
}

onMounted(() => {
	getList();
});
</script>
<style scoped lang="scss">
.table-body-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;
		.el-table {
			flex: 1;
		}
	}
}
</style>
